<template>
    <div class="panel-fullmodal" v-if="fullScreenDisplay">
        <div class="fullcloth"></div>
        <div class="full-cnt">
            <div class="full-content fix-scrollbar grable-layout">
                <panel-details class="layout-full-show " ref="panelDetails" :panelId="onePanel.layoutId">
                    <div slot="left" class="layout-full-title">
                        <div class="f-l m-l-20">{{onePanel.layoutName}}</div>
                        <div class="f-l m-l-50" id="clock"></div>
                    </div>
                    <div slot="right" > <i title="退出全屏" class="fa fa-close m-r-10 pointer" style="    font-size: 26px"  @click="exitFullScreen"></i></div>
                </panel-details>
            </div>
        </div>
    </div>
</template>
<script>
import panelDetails from './panel-details.vue'

export default {
    components: {
        panelDetails,
        clockTime: ''
    },
    props:{
        fullScreenDisplay:{
            type:Boolean,
            default:function(){
                return false
            },
        },
        onePanel:{
            type:Object,
        }
    },
    data(){
        return {
            // fullScreenDisplay:false,
        }
    },
    methods:{
        exitFullScreen(){
            this.$emit('exitFullScreen');
        },
        parseTime(time, cFormat) {
          if (arguments.length === 0) {
            return null
          }
          const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
          let date
          if (typeof time === 'object') {
            date = time
          } else {
            if (('' + time).length === 10) time = parseInt(time) * 1000
            date = new Date(time)
          }
          const formatObj = {
            y: date.getFullYear(),
            m: date.getMonth() + 1,
            d: date.getDate(),
            h: date.getHours(),
            i: date.getMinutes(),
            s: date.getSeconds(),
            a: date.getDay()
          }
          const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
            let value = formatObj[key]
            if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
            if (result.length > 0 && value < 10) {
              value = '0' + value
            }
            return value || 0
          })
          return timeStr
        },
        setClock() {
          let clockObj = document.getElementById("clock")
          if (clockObj) {
            clockObj.innerHTML = this.parseTime(new Date()) || ''
          }
        }
    },
    mounted () {
      let vm = this
      vm.$nextTick(function () {
        vm.setClock()
      })
      vm.intervalNum = setInterval(() => {
        vm.setClock()
      }, 1000);
    },
    beforeDestroy() {
    	clearInterval(this.intervalNum)
    }
}
</script>
<style lang="less">
.panel-fullmodal{
    position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
    .layout-full-title{
        overflow: hidden;
        height: 32px;
        line-height: 32px;
    }
    .layout-content{
        border: none;
    }
    .grable-layout{
        height: calc(~'100vh - 32px');
        .show-all{
            height: 100%;
            .show-content{
                border:none;
            }
        }
    }
    .fullcloth{
        background: #f1f3f6;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: .9;
        z-index: -1;
    }
    .full-cnt{
        margin: 0;
        width: 100%;
        .menu{
            overflow: hidden;
        }
        .close{
            color: #a3a3a3;
            font-size: 30px;
            float: right;
            cursor: pointer;
        }
        .full-content{
            margin: 0 auto;
            width: 100%;
            // height: calc(~ '117vh - 184px'); 1920
            // height: calc(~ '117vh - 127px'); //1366
            height: calc(~ '117vh - 184px');
            background: #fff;
            opacity: .96;
            // overflow-y: auto;
        }
    }
}
.full-cnt .grable-layout .layout-content .item {
  border-color: transparent;
}
</style>


